<template>
	<view class="content">
		<view class="content-hender">
			<!-- 表单 -->
			<view class="addTop">
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">姓名</text>
						<text class="wyyname">
							ئىسىم
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入姓名" />
						<text class="wyyname">
							ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
						</text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">联系电话</text>
						<text class="wyyname">
							ئالاقىلىشىش تېلېفون نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入电话" />
						<text class="wyyname">
							تېلېفون كىرگۈزۈڭ
						</text>
					</view>
				</view>
				<view class="nameBox">
					<view class="nameLeft">
						<text class="name">身份证号码</text>
						<text class="wyyname">
							كىملىك نومۇرى
						</text>
					</view>
					<view class="nameRight">
						<input class="inputname" type="text" placeholder="请输入身份号码" />
						<text class="wyyname">
							كىملىك نومۇرىنى كىرگۈزۈڭ
						</text>
					</view>
				</view>
			</view>
			<!-- 上传 -->
			<view class="upLoad">
				<view class="upLoad_title">上传操作员本人照片</view>
				<view class="upLoadLang">
				يوللاش مەشغۇلاتچى ئۆزىنىڭ رەسىمى
				</view>
				<view class="showimg_box">
					<view class="show_img" @click="ChooseImage">
						<view class="imgAdd">+</view>
						<view class="btnUpload">上传</view>
						<view class="imgLang">
							يوللاش
						</view>
					</view>
					<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
						<view class="icon-cuo" @click="delect(index)">
							<image class="closeImage" src="../../static/img/close.png" mode=""></image>
						</view>
						<image class="images" :src="item" @click="lookImg(index)"></image>
					</view>
				</view>
			</view>
			<!-- 上传操作证 -->
			<view class="upLoadPeople">
				<view class="upLoad_title">上传操作证</view>
				<view class="upLoadLang">
					يوللاش مەشغۇلات گۇۋاھنامىسى
				</view>
				<!-- 操作证正面 -->
				<view class="positive">
					<view v-if="imageSrc == ''" class="positivePeople" @click="upLoad">
						<view class="addimg">+</view>
						<view class="btnPeople">操作证正面</view>
						<view class="imgLang">
							كىملىك ئالدى
						</view>
					</view>
					<view v-if='imageSrc' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleImage"></image>
						<image class="positiveImages" :src="imageSrc"></image>
					</view>
				</view>
				<!-- 操作证反面 -->
				<view class="positive">
					<view v-if="imageBack == ''" class="positivePeople" @click="upLoadBack">
						<view class="addimg">+</view>
						<view class="btnPeople">操作证反面</view>
						<view class="imgLang">
						 مەشغۇلات كىنىشكىسى سەلبىي
						</view>
					</view>
					<view v-if='imageBack' class="positivePeople">
							<image class="closeImage" src="../../static/img/close.png" @click="deleBackImage"></image>
						<image class="positiveImages" :src="imageBack"></image>
					</view>
				</view>
			</view>	
			<!-- button -->
			<view class="footer_button">
				<view class="subCommit">
					<view class="conBtn">提交</view>
					<view class="btnLang">
						تاپشۇرۇش
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				imgList: [],
				imgArr: "",
				pingjiaSrc: '',
				imageSrc: '', //上传操作证正面
				imageBack: '', //上传操作证反面面
			}
		},
		onLoad() {

		},
		methods: {
			// 拒绝弹窗
			onToast(item) {
				app.toast(`${item.text}`)
			},
			// 上传头像
			ChooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length + tempFilePaths.length > _this.imgMaxNum) {
							app.toast('超过上传图片的最大数量')
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							for (var i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: '', //上传的服务器地址
									filePath: tempFilePaths[i],
									method: 'POST',
									name: "file",
									success: res => {}
								});
							}
						}
					}
				});
			},
			// 删除
			delect(index) {
				this.imgList.splice(index, 1)
			},
			// 预览
			lookImg(val) {
				const urls = this.imgList
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			// 上传操作证正面
			upLoad() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						console.log(res, 'ssssssssssss')
						this.imageSrc = res.tempFilePaths[0];
					}
				});
			},
			// 身份证正面删除
			deleImage(){ 
				this.imageSrc = ''
			},
			// 上传操作证反面
			upLoadBack(){ 
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						console.log(res, 'ssssssssssss')
						this.imageBack = res.tempFilePaths[0];
					}
				});
			},
			// 上传操作证反面删除
			deleBackImage(){ 
				this.imageBack = ''
			},
			
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background: #F5F5F5;
		font-family: PingFang SC;
		padding-bottom: 130rpx;
	}

	.addTop {
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.nameBox {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}

	.nameBox:nth-last-child(1) {
		border-bottom: 0rpx #eee solid;
	}

	.nameLeft {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 30rpx;
		color: #333333;
	}

	.wyynae {
		padding-top: 18rpx;
	}

	.nameRight {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.inputname {
		font-size: 30rpx;
		text-align: right;
		max-width: 300rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.subCommit {
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.conBtn {
		font-size: 30rpx;
		text-align: center;
	}

	.btnLang {
		font-size: 24rpx;
		text-align: center;
	}

	/* 上传 */
	.upLoad {
		padding: 20rpx;
		background: #FFFFFF;
	}

	.upLoad_title {
		font-size: 30rpx;
	}

	.upLoadLang {
		font-size: 24rpx;
	}

	.showimg_box {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.show_img {
		width: 218rpx;
		height: 218rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
	}

	.imgAdd {
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.btnUpload {
		font-size: 24rpx;
		font-weight: 500;
	}

	.imgLang {
		font-size: 18rpx;
	}

	.images {
		display: block;
		width: 210rpx;
		height: 210rpx;
		z-index: 999;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 10rpx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	.closeImage {
		display: block;
		width: 26rpx;
		height: 26rpx;
	}

	/* 上传身份证 */
	.upLoadPeople {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.positivePeople {
		width: 100%;
		height: 360rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
		position: relative;
	}

	.addimg {
		font-weight: 500;
		font-size: 60rpx;
		margin-top: 60rpx;
	}

	.btnPeople {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 25rpx;
	}

	.positiveImages {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.closeImage {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}
</style>
